<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #000;
            border-collapse: collapse;
            font: 16px/28px "宋体";
        }
        thead {
            background-color: skyblue;
        }
        span {
            color: #f00;
        }
    </style>
</head>
<body>
    <h3>1. 描述一下相对定位与绝对定位的区别。</h3>
    <table border="1">
        <caption>option:相对定位与绝对定位的区别</caption>
        <thead>
            <tr>
                <th rowspan="2" colspan="2"></th>
                <th>相对定位</th>
                <th>绝对定位</th>
            </tr>
            <tr>
                <th>ralative</th>
                <th>absolute</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">区别</td>
                <td>参考元素</td>
                <td>标签加载的原始位置</td>
                <td>参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考&lt;body&gt;</td>
            </tr>
            <tr>
                <td>性质</td>
                <td>
                    相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置<br/>
                    元素显示效果上，原位留坑，形影分离
                </td>
                <td>
                    绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开<br/>
                    注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同<br/>
                    注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值
                </td>
            </tr>
            <tr>
                <td>注意事项</td>
                <td>
                    注意①：偏移量属性的值是区分正负的。正数：表示偏移方向与属名   方向相反。负数：表示偏移方向与属性名方向相同。<br/>
                    注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时置了 left 和right 属性，只会加载 left 属性。垂直方向只加载top 属性。<br/>
                    注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。
                </td>
                <td>
                    
                    注意①：以 &lt;body&gt;为参考元素时，参考点的确定与偏移量方向有关：<br/>
                    第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。<br/>
                    第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。<br/>
                    注意②：如果祖先级中有定位的元素，就不会去参考 &lt;body&gt;<br/>
                    祖先元素参考点:
                    如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
                </td>
            </tr>
        </tbody>
    </table>
    <h3>2. 描述一下你了解到的元素等级有哪些，具体介绍每一个元素等级的特点。</h3>
    <table border="1">
        <thead>
            <tr>
                <th>元素等级</th>
                <th>特点</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">块级元素</td>
                <td>①块级元素可以设置宽高，在浏览器中正常加载。</td>
                
                
            </tr>
            <tr>
                <td>②块级元素必须独占一行，不能与其他任何标签并排一行。</td>
            </tr>
            <tr>
                <td>③块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。</td>
            </tr>
            <tr>
                <td rowspan="3">行内元素</td>
                <td>①行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。</td>
            </tr>
            <tr>
                <td>②行内元素可以与其他的行内或行内块元素并排一行显示。</td>
            </tr>
            <tr>
                <td>③行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。</td>
            </tr>
            <tr>
                <td rowspan="4">行内块元素</td>
                <td>①行内块元素可以设置宽度和高度。</td>
            </tr>
            <tr>
                <td>②行内块元素可以与其他的行内或行内块并排一行显示。 </td>
            </tr>
            <tr>
                <td>③行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。</td>
            </tr>
            <tr>
                <td>④行内块依旧具有标准流的微观性质，例如空白折叠现象。</td>
            </tr>
        </tbody>
    </table>
    <h3>3.描述一下你所知道的清除浮动的方式（起码三种）。</h3>
    <table border="1">
        <thead>
            <tr>
                <th colspan="2">清除浮动方法</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>清除浮动一<br/>height</td>
                <td>给标准流的父元素强制给一个合适的高度。</td>
            </tr>
            <tr>
                <td rowspan="2">清除浮动二<br/>clear属性</td>
                <td>作用：清除标签元素自身受到的前面的浮动元素的影响。</td>
            </tr>
            <tr>
                <td>属性值：<br/>
                    left 清除前面左浮动带来的影响<br/>
                    right 清除前面右浮动带来的影响<br/>
                    both 清除前面所有浮动带来的影响<br/>
                    给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
                </td>
            </tr>
            <tr>
                <td rowspan="2">清除浮动三<br/>隔墙法</td>
                <td>外墙法：在两个大的父盒子之间，添加一个空的 &lt;div&gt;标签，标签上带有 clear：both 属性</td>
            </tr>
            <tr>
                <td>内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 &lt;div&gt; 元素，标签高度为 0，添加 clear 属性。</td>
            </tr>
            <tr>
                <td rowspan="3">清除浮动四<br/>伪类</td>
                <td>本质是使用伪类方法利用css代码书写一堵内墙。</td>
            </tr>
            <tr>
                <td>
                    伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。<br/>
                    :after：这个伪类表示选中的是某个标签内部的最后的位置。
                </td>
            </tr>
            <tr>
                <td>书写方法：前面必须加普通的选择器，后面连续书写伪类名称。<br/>
                    将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。</td>
            </tr>
            <tr>
                <td>清除浮动五<br/>溢出隐藏</td>
                <td>给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题。</td>
            </tr>
        </tbody>
    </table>
    <h3>4. 描述一下你所知道的视频标签属性的属性名、属性值、以及作用（起码四种）。</h3>
    <table  border="1">
        <caption>&lt;video&gt;视频标签属性的属性名、属性值、以及作用</caption>
        <thead>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>作用</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>autoplay</td>
                <td>autoplay</td>
                <td>视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）</td>
            </tr>
            <tr>
                <td>controls</td>
                <td>controls</td>
                <td>向用户显示播放控件</td>
            </tr>
            <tr>
                <td>loop </td>
                <td>loop</td>
                <td>放完是否继续播放该视频，循环播放</td>
            </tr>
            <tr>
                <td>preload</td>
                <td>auto（预先加载视频）<br/>none（不应加载视频）</td>
                <td>规定是否预加载视频(如果有了autoplay 就忽略该属性）</td>
            </tr>
            <tr>
                <td>src </td>
                <td>url </td>
                <td>视频url地址</td>
            </tr>
            <tr>
                <td>width</td>
                <td>pixels(像素)</td>
                <td>设置播放器宽度</td>
            </tr>
            <tr>
                <td>height</td>
                <td>pixels(像素)</td>
                <td>设置播放器高度</td>
            </tr>
            <tr>
                <td>poster</td>
                <td>Imgurl</td>
                <td>加载等待的画面图片</td>
            </tr>
            <tr>
                <td>muted</td>
                <td>muted</td>
                <td>静音播放</td>
            </tr>
        </tbody>
    </table>
    <h3>5. CSS3新增了伪元素选择器中双冒号与单冒号有什么区别，并阐述一下伪元素的注意事项。</h3>
    <table border="1">
        <thead>
            <tr>
                <th colspan="2">CSS3新增伪元素</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">CSS3中双冒号与单冒号的区别</td>
                <td>双冒号(::)用于CSS3伪元素。</td>
            </tr>
            <tr>
                <td>单冒号(:)用于CSS3伪类</td>
            </tr>
            <tr>
                <td rowspan="5">伪元素的注意事项</td>
                <td>伪元素只能给双标签添加，不能给单标签添加。</td>
            </tr>
            <tr>
                <td>伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的。</td>
            </tr>
            <tr>
                <td>伪元素里面必须写上属性 content:""; 。</td>
            </tr>
            <tr>
                <td>before 和 after 创建一个元素，但是属于行内元素。</td>
            </tr>
            <tr>
                <td>因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。</td>
            </tr>
        </tbody>
    </table>
    <h3>6. 标准盒模型与怪异盒模型的区别。</h3>
    <table border="1">
        <thead>
            <tr>
                <th>属性值</th>
                <th>区别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>标准盒模型<br/>content-box</td>
                <td>
                    默认值，标准盒子模型，盒模型是外扩的。<br/>
                    width与height只包括内容的宽和高。<br/>
                    <span>在width和height之外绘制元素的内边距和边框。</span>
                </td>
            </tr>
            <tr>
                <td>怪异盒模型<br/>border-box</td>
                <td>
                    怪异模式，盒模型是内减的。<br/>
                    width和height属性包括内容，内边距和边框，但不包括外边距。<br/>
                    <span>为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。</span>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>